<template>
  <div  :style="{'width':width+'px','height':height+'px'}" class="box">
      <ul :style="{'height':height+'px','left':px+'px'}"  class="uls">
          <li class="lis" :style="{'width':width+'px','height':height+'px'}" v-for=" (item,index) in imgList" :key="index">

              <img :src="item.imgUrl" alt="短发短发">
          </li>

      </ul>
                <span :style="{'left':width / 2 -13*imgList.length + 'px','bottom':height/8+'px'}" class="i"><i v-for="i in 6" :key="i"  >o</i></span>
      <span :style="{'top':height / 2 -14 + 'px'}" @click="lefeFn" class="lefe">➡️</span>
      <span :style="{'top':height / 2 -14 + 'px'}" @click="subFn" class="ref">⬅️</span>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'lbt',
  props: {
    imgList: {
      type: Array

    },
    width: {
      type: String,
      default: '50'
    },
    height: {
      type: String,
      default: '50'
    }
  },
  setup (props) {
    const px = ref(0)
    const lefeFn = () => {
      px.value = px.value - props.width
      console.log(px.value)
    }
    const subFn = () => {
      px.value = px.value + +props.width
      console.log(px.value)
    }
    return {
      px,
      lefeFn,
      subFn
    }
  }
}
</script>

<style lang="less">
.lis {
list-style: none;
background-color:red;
display: inline-block;

}
.lefe{
    position: absolute;
    right: 0;
    top: 0px;
}
.ref{
     position: absolute;
    left: 0px;
    top: 0px;
}
.box {
overflow: hidden;
position: relative;
}
img{
width: 100%;
height: 100%;
}
.uls{
    display: flex;
    position: absolute;
    left: 0px;
    top: 0px;

    transition: all .5s;
}
.i{
position: absolute;

bottom:  50px;
 i{
     margin-left: 5px;
 }
}
</style>
